import React, { useEffect } from 'react'
import {
  NavBar, Button,
  Checkbox,
  Field,
  Radio,
  Rate,
  Slider,
  Stepper,
  Switch,
  Uploader,
  Form,
  hooks 
} from 'react-vant';

import { DeleteO } from '@react-vant/icons';
import { useDispatch, useSelector } from 'react-redux'
import * as api from '../api/index'
import withRouter from '../utile/withRouter'

function Edit({ router }) {
  const dispatch = useDispatch()
  const [form] = Form.useForm();

  
  useEffect(() => {
    dispatch(api.get_address(router.params.id))
  }, [dispatch])

  const dates = useSelector(state => {
    return state.reducer.edits
  })
  

  const onFinish = (values) => {
    console.log(values);
    let obj ={
      id:router.params.id,
      detail:values.detail,
      title:values.textarea,
      name:values.name,
      phone:values.phone,
    }
    //重新发送到仓库数据
    dispatch(api.edit_address(obj))
    router.navigate('/detailList')
  };
  const [ref, { set, get, getAll, clear, submit }] = hooks.useFormSmart({ value: dates[0] });
  
  //删除当前地址
  const delet=(ids)=>{
    
    dispatch( api.delet_address(ids) );
    router.navigate('/detailList')
  }
  
  return (
    <div>
      <NavBar title='编辑地址'  onClickLeft={() => router.navigate('/detailList')}
        rightText={<DeleteO  fontSize={20} />}
        onClickRight={() => {
          delet(router.params.id)
        }}
      ></NavBar>
      <Form
        colon
        border={false}
        form={form}
        onFinish={onFinish}
        ref={ref}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button round nativeType="submit" type="primary" block>
              提交
            </Button>
          </div>
        }
      >
        {/* 手机号 */}
        <Form.Item
          tooltip={{
            name:
              '',
          }}
          intro="确保这是唯一的用户名"
          rules={[{ required: true, name: '请填写用户名' }]}
          name="name"
          label="联系人"
        >
          <Field placeholder="请输入用户名" />
        </Form.Item>


        <Form.Item
          tooltip={{
            phone:
              '',
          }}

          rules={[{ required: true, phone: '请填写手机号' }]}
          name="phone"
          label="手机号"
        >
          <Field placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          tooltip={{
            detail:
              '',
          }}

          rules={[{ required: true, detail: '请填写收货地址' }]}
          name="detail"
          label="收获地址"
        >
          <Field placeholder="收货地址" />
        </Form.Item>
        <Form.Item
          tooltip={{
            title:
              '',
          }}

          rules={[{ required: true, title: '请填写详细地址' }]}
          name="title"
          label="详细地址"
        >
          <Field placeholder="收货地址" />
        </Form.Item>
      

      </Form>
    </div>
  )
}

export default withRouter(Edit)